<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css" />
    <script src="vue.js"></script>
    <script src="elementui.js"></script>
    <script src="axios.js"></script>
    <script src="common.js"></script>
    <title>查询显示所有的菜单表格数据</title>
</head>
<body>
    <div id="app">
        <template>
            <el-button @click="add()" type="primary" style="margin-bottom: 20px;">新增菜单</el-button>
            菜单名称:<el-input v-model="input" placeholder="请输入菜单名"></el-input>
            <el-button type="primary" @click="searchCar">查询</el-button>

            <el-table :data="tableData" border style='width: 100%'>
                
              <el-table-column prop="label" label="菜单名称" width="300">
              </el-table-column>

              <el-table-column prop="brief" label="地址" width="300">
            </el-table-column>

            <el-table-column prop="imgicon" label="图标" width="300">
            </el-table-column>

            <el-table-column prop="parentid" label="所属父级id" width="300">
            </el-table-column>


            <el-table-column fixed="right"  label="操作" width="180">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>

            </el-table>





            <el-dialog :title="dialogTitle" :visible.sync="showDialogFlag" width="30%">
              
                <el-form :model="currentMenu" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="currentMenu.label"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="currentMenu.brief"></el-input>
                    </el-form-item>
                    <el-form-item label="图标">

                        <i :class="currentMenu.imgicon"></i>
                        <el-select v-model="currentMenu.imgicon" placeholder="请选择">
                            <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
                                <i :class="item"></i>{{item}}
                            </el-option>
                          </el-select>
                          
                    </el-form-item>
                    <el-form-item label="父级id">
                        <el-cascader  :props="parentidProps" :show-all-levels="false" v-model="currentMenu.parentid" :options="parentidOptions"></el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDialogFlag = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </el-dialog>


            <!-- 修改 -->
            <el-dialog :title="dialogTitle" :visible.sync="showDialogFlag1" width="30%">
              
                <el-form :model="currentMenu1" label-width="80px">
                    <el-form-item label="标题">
                        <el-input v-model="currentMenu1.label"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="currentMenu1.brief"></el-input>
                    </el-form-item>
                    <el-form-item label="图标">

                        <i :class="currentMenu1.imgicon"></i>
                        <el-select v-model="currentMenu1.imgicon" placeholder="请选择">
                            <el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
                                <i :class="item"></i>{{item}}
                            </el-option>
                          </el-select>
                          
                    </el-form-item>
                    <el-form-item label="父级id">
                        <el-cascader :props="parentidProps" :show-all-levels="false" v-model="currentMenu1.parentid" :options="parentidOptions"></el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDialogFlag1 = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm1">确 定</el-button>
                </span>
            </el-dialog>
          </template>
          

    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            input: '',
            imgiconoptions:["el-icon-eleme","el-icon-platform-eleme","el-icon-eleme","el-icon-platform-eleme","el-icon-warning"],
            parentidProps: {
                value:"id",
                emitPath:false,
                checkStrictly:true,
            },//配置父级菜单
            parentidOptions: [],//父级菜单数据
            tableData: [],
            showDialogFlag: false,
            showDialogFlag1: false,
            dialogTitle: '',
            currentMenu: {
                id: '',
                label: '',
                href: '',
                imgicon: '',
                parentid: '0'
            },
            currentMenu1: {
                id: '',
                label: '',
                href: '',
                imgicon: '',
                parentid: '0'
            },
        },methods: {
            initTreeData() {
                axios.get(API+'menuList').then(res=>{
                        console.log(res);
                        this.tableData=res.data;
                    })
            },add(){
                axios.get(API+'menuList').then(res=>{
                    let s=arrayToTree(res.data);
                        this.parentidOptions=s
                    })
                    this.dialogTitle='新增'
                this.showDialogFlag=true;
            },submitForm(){//增加提交
                console.log(this.currentMenu);
                //发送请求
                axios.post(API+'addMenu',this.currentMenu).then(res=>{
                    if(res.data.code==200){
                        alert("成功")
                        this.showDialogFlag=false;
                        this.initTreeData();
                    }else{
                        alert("失败")
                    }
                })
                
            },handleEdit(index, row) {
                this.currentMenu1 = Object.assign({}, row); // 复制当前行的数据
                this.dialogTitle='修改'
                 axios.get(API+'menuList').then(res=>{
                    let s=arrayToTree(res.data);
                        this.parentidOptions=s
                    })
                    this.showDialogFlag1=true;
            }, submitForm1(){
                //发送请求
                axios.post(API+'updateMenu',this.currentMenu1).then(res=>{
                    if(res.data.code==200){
                        alert("成功")
                        this.showDialogFlag1=false;
                        this.initTreeData();
                    }else{
                        alert("失败")
                    }
                })
            },searchCar(){
                axios.get(API+"selectMenuName?label="+this.input
                        ).then(res=>{
                        this.tableData=res.data;
                        })
            }, 
              
              
        },
        mounted() {
           this.initTreeData();
        }
    })
</script>
</html>